<template>
	<view class="registration">
		<view class="registration-content">
			<view class="login-username">
				<i class="el-icon-mobile"></i>
				<input type="text" name="" id="" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="login-code">
				<i class="el-icon-cpu"></i>
				<input type="text" placeholder="请输入验证码" v-model="userCode" />
				<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
			</view>
		</view>
		<view class="login-button"><button @click="login">下一步</button></view>
		<view class="registration-botton"><view class="registration-password" @click="goBack">密码登陆</view></view>
	</view>
</template>

<script>
import axios from 'axios';
	
export default {
    data() {
           return {
               code: '',       // 用于存储验证码的状态
               phone: '',      // 用于存储电话号码的状态
               userCode: ''    // 用于存储用户输入的验证码的状态
           };
       }, 
    methods: {
        login() {
            if (this.code === '' || this.phone === '' || this.userCode === '') {
                uni.showToast({
                    title: '手机号、验证码和用户码不能为空',
                    icon: 'none'
                });
            } else {
                uni.request({
                    url: '/api/login',
                    method: 'POST',
                    data: {
                        phone: this.phone,
                        code: this.code
                    },
                    success: (res) => {
                        if (res.data.success) {
							// 假设后端返回的登录凭证是一个token  
							const token = response.data.token; 
							// 使用localStorage来保存token  
							localStorage.setItem('auth-token', token); 
                            console.log('登录成功:',  token);
                            // TODO: 根据数据执行登录成功后的操作
                        } else {
                            uni.showToast({
                                title: res.data.message || '登录失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('登录时发生错误:', err);
                        uni.showToast({
                            title: '登录时发生错误',
                            icon: 'none'
                        });
                    }
                });
            }
			function getToken() {  
			    return localStorage.getItem('auth-token');  
			}  
			  
			function setAuthToken(config) {  
			    const token = getToken();  
			    if (token) {  
			        config.headers.Authorization = `Bearer ${token}`;  
			    }  
			    return config;  
			}  
			  
			// 调用其他接口时，使用setAuthToken函数来设置请求头  
			async function fetchUserData() {  
			    try {  
			        const config = {  
			            method: 'get',  
			            url: '/api/user'  
			        };  
			  
			        const authConfig = setAuthToken(config); // 设置请求头中的token  
			        const response = await axios(authConfig);  
			  
			        if (response.data.success) {  
			            console.log('用户数据：', response.data);  
			        } else {  
			            console.error('获取用户数据失败');  
			        }  
			    } catch (error) {  
			        console.error('获取用户数据时发生错误', error);  
			    }  
			}
        },
        goBack() {
            this.$router.push('/pages/login/login');
        },
        validate(key) {
            if (!this.rules[key] || !this.rules[key].rule || !this.rules[key].rule.test(this[key])) {
                uni.showToast({
                    title: this.rules[key]?.meg || 'Validation failed',
                    icon: 'none'
                });
                return false;
            }
            return true;
        }
    }
};

</script>

<style lang="less">
.registration {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;
	// margin-top: 100rpx;
	.registration-content{
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;
		input{
			padding: 10rpx;
			width:60%;
			height: 70rpx;
		}
		i {
			color: #6999ff;
			padding-right: 20rpx;
			font-size: 50rpx;
		}
		.login-username{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
		.login-code{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
			button{
				width:250rpx;
				height: 85rpx;
				font-size: 30rpx;
				line-height: 85rpx;
				background-color: #2596ff;
				color: #fff;
			}
		}
	}
	.login-button{
		margin-top: 150rpx;
		width: 90%;
		margin-left: 5%;
		button{
			background-color: #6999ff;
			color: #fff;
		}
	}
}

.registration-botton {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-between;
	.registration-password {
		padding-left: 40rpx;
		color: #fff;
	}
	.registration-zhuce {
		padding-right: 40rpx;

		color: #fff;
	}
}
</style>

